<template>
    <footer class="f-footer">
        <tabbar>
            <tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 0" link="/iosnewsHome">
                <i slot="icon" class="iconfont icon-home"></i>
                <i slot="icon-active" class="iconfont icon-home-fill"></i>
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item @on-item-click="handlerItemClick" :selected="selectIndex === 1" link="/iosmine">
                <i slot="icon" class="iconfont icon-my"></i>
                <i slot="icon-active" class="iconfont icon-my-fill"></i>
                <span slot="label">我的</span>
            </tabbar-item>
        </tabbar>
    </footer>
</template>

<script>
    /**
     * Created by c.y on 2018/3/20.
     * 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
     * IOS上架的全局的footer
     * selectIndex number类型 选中的那个tab
     */
    import {Tabbar, TabbarItem} from 'vux'

    export default {
        name: 'f-footer',
        data() {
            return {
                selectIndex: 0
            }
        },
        components: {
            Tabbar,
            TabbarItem,
        },
        methods: {
            handlerItemClick(index) {
                this.selectIndex = index;
            }
        },
        props: {
            index: {
                type: Number,
                default: 0
            }
        },
        activated: function () {
            this.selectIndex = this.index;
        }
    }
</script>

<style lang="less">
    .f-footer {
        .iconfont {
            font-size: 24PX;
        }
    }
</style>
